<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StudentDengLu</title>   
      <!--jQuery组件验证码样式-->
      <link rel="stylesheet" href="./css/verify.css">
      <!--自定义样式-->
      <link rel="stylesheet" href="./css/login.css" media="all">
</head>
<body>
    <header>
        <div class="logo">学生信息管理系统</div>
    </header>
    <div class="login-content">
        <div class="bimg">
            <div class="bimg-box">
                <h2>StudentDengLu</h2>
                <div id="form_login" action="index.html">
                <input type="text" class="textBorder" placeholder="用户名">
                <input type="password" class="textBorder" placeholder="密码"/>
                <div id="mpanel"></div>
                <input type="submit"  value="登录" id="dl"/>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <p>Powered by 打造前程 © 2014-2020 北京打造前程互联网教育科技有限公司 版权所有</p>
    </div>
</body>
 <!--jQuery引入-->
 <script src="./js/jquery-3.3.1.min.js"></script>
 <!--jQuery组件验证码 验证事件处理-->
 <script src="./js/verify.min.js"></script>
 <!--初始化全局数据配置-->
 <script src="./js/default.js"></script>
 <!--HTML5本地数据存储localStorage-->
 <script src="./js/ls.js"></script>
    <script>
        $(function () {
          // 动态设置验证码样式
          $('.varify-input-code').attr('placeholder', '验证码');
          $('.varify-input-code').css('text-indent', '10px');
      
          // 通过封装了 jquery验证码组件
          $('#mpanel').codeVerify({
            type: 1,
            width: '80px',
            height: '30px',
            fontSize: '14px',
            codeLength: 4,
            btnId: 'dl',
            ready: function () {
            },
            success: function () {
              alert('验证匹配！');
              // 获取用户名和密码
              // 用户名
              var get_input_user_name = $('.textBorder')[0].value;
              // 密码
              var get_input_user_pass = $('.textBorder')[1].value;
              // 判空
              if (get_input_user_name == '' || get_input_user_pass == '') {
                alert('用户名或者密码不能为空');
                return;
              }
              // 拼接发送请求的url,接口地址
              var urlString = baseUrl + port + '/login';
              // 利用ajax技术 向服务器 post 用户名和密码
                      /*
                      //ajax文档以及使用 https://www.javascriptcn.com/chm/zepto/#$.ajax 
                      $.ajax({
                          url : urlString,
                          // 请求类型是POST还是GET
                          type : 'POST',
                          // 异步还是同步 默认是异步，false表示同步
                          async: true,
                          // 发送数据
                          data: {
                              uname: get_input_user_name, upw: get_input_user_pass
                          },
                          // 超时时间ms
                          timeout: 5000,
                          // 返回数据类型json数据
                          dataType: 'json',
                          // 成功返回处理
                          success: function (data, textStatus, jqXHR) {
                              //解析json数据
                              console.log(data);
                              console.log(textStatus);
                              console.log(jqXHR);
                              // 模拟服务器返回成功
                              var uid = 'admin';
                              var upass = 'admin';
                              // 将用户id存放到本地
                              save_value_to_storage('USERID',uid);
                              // 跳转
                              window.location.href = 'index.html';
                          },
                          // 错误返回
                          error: function (xhr, textStatus) {
                              console.log('错误');
                              console.log(xhr);
                              console.log(textStatus);
                          }
                      });
                      */
              // 模拟服务器返回成功
              var uid = $('.textBorder')[0].value;
              var upass = 'admin';
              //保存到本地
              save_value_to_storage('USERID', uid);
              console.log("USERID")
              // 跳转指定页面
              window.location.href = 'index.html';
      
            },
            error: function () {
              alert('验证码不匹配！');
            }
          });
        });
      </script>
</html>